<template>
  <div>
    <n-card :bordered="false" class="proCard">
      <n-form
        :label-width="200"
        :model="formValue"
        :rules="rules"
        label-placement="left"
        ref="formRef"
        class="py-8"
      >
        <n-grid cols="2" responsive="screen">
          <n-grid-item offset="0">
            <n-form-item label="班组合同类别" path="contract_type">
              <n-input v-model:value="formValue.contract_type" placeholder="班组合同类别" />
            </n-form-item>
            <n-form-item label="分类预算金额" path="classified_budget_amount">
              <n-input
                placeholder="分类预算金额"
                v-model:value="formValue.classified_budget_amount"
              />
            </n-form-item>
            <n-form-item label="劳务合同编号" path="contract_number">
              <n-input v-model:value="formValue.contract_number" placeholder="劳务合同编号" />
            </n-form-item>
            <n-form-item label="劳务公司编号" path="cpmpany_number">
              <n-input placeholder="劳务公司编号" v-model:value="formValue.cpmpany_number" />
            </n-form-item>
            <n-form-item label="开户银行" path="bank">
              <n-input v-model:value="formValue.bank" placeholder="开户银行" />
            </n-form-item>
            <n-form-item label="劳务班组编号" path="nummber">
              <n-input v-model:value="formValue.nummber" placeholder="劳务班组编号" />
            </n-form-item>
            <n-form-item label="劳务班组联系方式" path="contact">
              <n-input v-model:value="formValue.contact" placeholder="劳务班组联系方式" />
            </n-form-item>
            <n-form-item label="劳务合同金额" path="contract_price">
              <n-input v-model:value="formValue.contract_price" placeholder="劳务合同金额" />
            </n-form-item>
            <n-form-item label="税金" path="taxes">
              <n-input v-model:value="formValue.taxes" placeholder="税金" />
            </n-form-item>
            <n-form-item label="计税方式" path="taxation_method">
              <n-input v-model:value="formValue.taxation_method" placeholder="计税方式" />
            </n-form-item>
            <n-form-item label="进度款比例" path="progress_payment_ratio">
              <n-input v-model:value="formValue.progress_payment_ratio" placeholder="进度款比例" />
            </n-form-item>
            <n-form-item label="结算款比例" path="settlement_ratio">
              <n-input v-model:value="formValue.settlement_ratio" placeholder="结算款比例" />
            </n-form-item>
          </n-grid-item>
          <n-grid-item offset="0">
            <n-form-item label="合同签订日期" path="signing_date">
              <n-date-picker
                type="date"
                v-model:value="formValue.signing_date"
                style="width: 100%"
              />
            </n-form-item>
            <n-form-item label="分类累计签订金额" path="signed_amount_by_category">
              <n-input
                placeholder="分类累计签订金额"
                v-model:value="formValue.signed_amount_by_category"
              />
            </n-form-item>
            <n-form-item label="劳务合同名称" path="contract_name">
              <n-input placeholder="劳务合同名称" v-model:value="formValue.contract_name" />
            </n-form-item>
            <n-form-item label="劳务公司名称" path="company_name">
              <n-input placeholder="劳务公司名称" v-model:value="formValue.company_name" />
            </n-form-item>
            <n-form-item label="银行账号" path="bank_number">
              <n-input placeholder="银行账号" v-model:value="formValue.bank_number" />
            </n-form-item>
            <n-form-item label="劳务班组名称" path="name">
              <n-input v-model:value="formValue.name" placeholder="劳务班组名称" />
            </n-form-item>
            <n-form-item label="管理费" path="management_expense">
              <n-input v-model:value="formValue.management_expense" placeholder="管理费" />
            </n-form-item>
            <n-form-item label="合同金额(不含税)" path="price">
              <n-input v-model:value="formValue.price" placeholder="合同金额(不含税)" />
            </n-form-item>
            <n-form-item label="税率" path="tax_rate">
              <n-input v-model:value="formValue.tax_rate" placeholder="税率" />
            </n-form-item>
            <n-form-item label="预付款比例" path="prepayment_ratio">
              <n-input v-model:value="formValue.prepayment_ratio" placeholder="预付款比例" />
            </n-form-item>
            <n-form-item label="竣工款比例" path="completion_payment_ratio">
              <n-input
                v-model:value="formValue.completion_payment_ratio"
                placeholder="竣工款比例"
              />
            </n-form-item>
            <n-form-item label="质保金比例" path="Retention_money_ratio">
              <n-input v-model:value="formValue.Retention_money_ratio" placeholder="质保金比例" />
            </n-form-item>
          </n-grid-item>
        </n-grid>
        <n-form-item label="施工内容" path="construction_content">
          <n-input
            v-model:value="formValue.construction_content"
            type="textarea"
            placeholder="施工内容"
          />
        </n-form-item>
        <n-form-item label="施工方式" path="construction_method">
          <n-input
            v-model:value="formValue.construction_method"
            type="textarea"
            placeholder="施工方式"
          />
        </n-form-item>
        <n-form-item label="违约责任" path="breach_of_contract">
          <n-input
            v-model:value="formValue.breach_of_contract"
            type="textarea"
            placeholder="违约责任"
          />
        </n-form-item>
        <n-form-item label="备注" path="remarks">
          <n-input v-model:value="formValue.remarks" placeholder="备注" type="textarea" />
        </n-form-item>
        <n-form-item label="合同签署状态" path="contract_status">
          <n-input v-model:value="formValue.contract_status" placeholder="合同签署状态" />
        </n-form-item>
        <n-form-item label="附件上传" path="files">
          <uploadFiles
            action="https://example.com/upload"
            accept="image/*"
            multiple
            :limit="5"
            :maxFileSize="5"
            placeholder="点击或拖拽图片到此处上传（最多5张，每张不超过5MB）"
            v-model="formValue.files"
          />
        </n-form-item>
      </n-form>
    </n-card>
    <n-space justify="center">
      <n-button type="warning" @click="formSubmit">存草稿</n-button>
      <n-button type="primary" @click="formSubmit">提交</n-button>
      <n-button @click="resetForm">重置</n-button>
    </n-space>
  </div>
</template>

<script lang="ts" setup>
  import { ref, unref, reactive, onMounted } from 'vue';
  import { useMessage } from 'naive-ui';
  import { useRouter } from 'vue-router';
  import {
    getLaborTeamContract,
    patchLaborTeamContract,
    putLaborTeamContract,
  } from '@/api/laborTeam/laborCompany';
  import { ResultEnum } from '@/enums/httpEnum';
  import uploadFiles from '@/components/uploadFiles.vue';
  const id: any = ref(useRouter().currentRoute.value.params.id);

  const rules = {
    contract_type: {
      required: true,
      message: '请输入班组合同类别',
      trigger: 'blur',
    },
    cpmpany_number: {
      required: true,
      message: '请输入劳务公司编号',
      trigger: 'blur',
    },
    contract_name: {
      required: true,
      message: '请输入劳务合同名称',
      trigger: ['blur', 'change'],
    },
    nummber: {
      required: true,
      message: '请输入劳务班组编号',
      trigger: 'change',
    },
    contract_price: {
      required: true,
      message: '请输入劳务合同金额',
      trigger: 'change',
    },
    taxation_method: {
      required: true,
      message: '请选择计税方式',
      trigger: 'change',
    },
    management_expense: {
      required: true,
      message: '请输入管理费',
      trigger: 'change',
    },
    tax_rate: {
      required: true,
      message: '请选择税率',
      trigger: 'change',
    },
  };

  const formRef: any = ref(null);
  const message = useMessage();

  const defaultValueRef = () => ({
    id: 0,
    contract_type: '',
    classified_budget_amount: '',
    contract_number: '',
    cpmpany_number: 1,
    bank: '',
    nummber: '',
    contact: '',
    contract_price: '',
    taxes: '',
    taxation_method: '',
    progress_payment_ratio: '',
    settlement_ratio: '',
    signing_date: null,
    signed_amount_by_category: '',
    contract_name: '',
    company_name: '',
    bank_number: '',
    name: '',
    management_expense: '',
    price: '',
    tax_rate: '',
    prepayment_ratio: '',
    completion_payment_ratio: '',
    Retention_money_ratio: '',
    construction_content: '',
    construction_method: '',
    breach_of_contract: '',
    remarks: '',
    contract_status: '',
    files: '',
  });

  let formValue = reactive(defaultValueRef());
  function formSubmit() {
    formRef.value.validate(async (errors) => {
      if (!errors) {
        let response: any = null;
        if (formValue.id == 0) {
          response = await putLaborTeamContract(formValue);
        } else {
          response = await patchLaborTeamContract(formValue);
        }

        if (response.code == ResultEnum.SUCCESS) {
          message.success('操作成功');
          formValue.id = response.data;
          getData();
        }
      } else {
        message.error('验证失败，请填写完整信息');
      }
    });
  }

  const getData = async () => {
    const response: any = await getLaborTeamContract(formValue.id);
    if (response.code === ResultEnum.SUCCESS) {
      response.data.price = parseFloat(response.data.price);
      Object.assign(formValue, response.data);
    }
  };

  function resetForm() {
    formRef.value.restoreValidation();
    formValue = Object.assign(unref(formValue), defaultValueRef());
  }

  onMounted(() => {
    formValue.id = id.value;
    if (formValue.id != 0) {
      getData();
    }
  });
</script>
